<style lang="less">
@import './login.less';

</style>

<template>
  <div class="login">
    <div class="login-con">
      <Card icon="log-in" title="欢迎登录" :bordered="false">
        <template #extra>
          <a href="#" @click.prevent="changeLoginType">
            <Icon type="ios-loop-strong"></Icon>
            切换登录方式
          </a>
        </template>
        <div class="form-con">
          <Spin fix v-if="loadingImg"></Spin>

          <template v-if="loginType==='randomPwd'">
            <LoginForm @on-success-valid="handleSubmit"></LoginForm>
            <div class="login-tip">
              游客用户名：test
              密码:
              <Poptip title="官方小程序：中二少年工具箱" placement="bottom-end">
                <Button type="text" style="margin: 0 4px;height: auto;padding: 0;font-size: 12px">获取通行码
                </Button>
                <template #content>
                  <div style="display: flex;flex-direction: row;align-items: center">
                    <Text style="white-space: normal;width: 150px" type="warning">
                      中二少年各系列工具箱，均为免费工具，谨防上当受骗，请使用微信扫码登录！！！
                    </Text>
                    <div>
                      <img :src="miniAppQrcodeUrl" style="width: 120px;height: 120px"/>
                    </div>
                  </div>

                </template>
              </Poptip>
            </div>

          </template>
          <template v-if="loginType==='sceneCode'">
            <div v-if="miniAppSceneCodeUrl"
                 style="width: 100%;display: flex;justify-content: center;position: relative">
              <img :src="miniAppSceneCodeUrl" style="width: 120px;height: 120px"/>
              <div v-if="showRefreshCode" class="refresh-icon">

                <Icon style="cursor: pointer;opacity: 0.8" @click="loginBySceneCode" type="md-refresh" size="80"/>
              </div>
            </div>
          </template>
        </div>
      </Card>
    </div>
    <div style="position: absolute;bottom: 8px;width: 100%;display: flex;justify-content: center;color: white">
      <a href="https://beian.miit.gov.cn/" target="_blank">冀ICP备2022011594号-1</a>
    </div>

  </div>
</template>

<script setup>
import LoginForm from '@/components/login-form/login-form.vue'
import {useRouter} from 'vue-router'
import {onMounted, ref} from 'vue'
/**
 * 小程序码扫码登录*/
import {useLoginMiniApp} from "@/module-base/views/login/loginMiniApp.js";
import {Button} from "view-ui-plus";

const router = useRouter()

const props = defineProps({
  toPage: {
    type: String,
    default: null
  }
})

/**
 * 登录方式管理
 * 两种登录方式，随机码和密码登录-randomPwd，扫码登录-sceneCode*/
const loginType = ref('sceneCode')

/**
 * 小程序扫码登录*/
const {
  loadingImg,
  showRefreshCode,
  loginBySceneCode,
  getUserInfoBySceneCode,
  // miniAppQrcodeUrl,
  miniAppSceneCodeUrl,
  // getWXACodeUnlimited,
  getUserInfoInterval
} = useLoginMiniApp()

/**
 * 普通登录方式*/
const miniAppQrcodeUrl = ref('')  //普通小程序码
onMounted(async ()=>{
  miniAppQrcodeUrl.value = (await import('@/assets/images/miniApp.jpg')).default
})

function handleSubmit() {
  // 获取路由
  // const routeData=await
  router.push({
    name: props.toPage || '_home'
  })
}

async function changeLoginType() {
  if (loginType.value === 'sceneCode') {
    loginType.value = 'randomPwd'
    clearInterval(getUserInfoInterval.value);
  } else if (loginType.value === 'randomPwd') {
    loginType.value = 'sceneCode'
    await loginBySceneCode()
  }
}
</script>

<style scoped>
.form-con {
  position: relative;
}

.refresh-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.3); /* 半透明白色背景 */
  backdrop-filter: blur(3px); /* 关键：模糊背景 */
}

</style>
